<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器 语法 任意选择器:hover 每个伪类选择器 具备特点
						所有的元素都具备：hover【常见伪类选择器】
			*/
		   h1:hover{
			   background:#ffaa00;
			   color:#00ffff;
		   }
		   /*
		   伪类选择器 link 链接未点击时状态
					active链接未被点击时的状态
					visited 链接点击后的状态
					hover 悬停链接时的状态
			主要结合在一起 针对a元素效果
		   */
		  a:link {/*未访问状态*/
		   color: #00ff00;
		   /*去掉超链接下划线*/
		   text-decoration: none;  
		  }
		  a:active{/*被点击时的状态*/
		  color:#aaaaff;
		  background: #ffaa00;	  
		  }
		  a:visited{/*点击后的状态*/
		  color: #aaaaff;
			background:#ffaa00;  
		  }
		  a:hover{
			  font-size:36px;
		  }
		  /**
		   * 伪选择器：Input：focus 获取焦点 ：鼠标
		   * 
		   * 
		   针对 输入框 Input元素
		   */
		  input:focus{
			  background:#ffff00;
		  }
		   /*伪类选择器 ：first-child第一个儿子元素
						：last-child 最后一个元素
						：nth-child(n)匹配n个儿子元素
			针对：父子级 默认父子级 table 列表
			*/
		   li:first-child{
			   background:#00ff00;
			   color:#00ffff;
		   }
		   li:last-child{
			   font-size: 15pt;
		   }
		   li:nth-child(2){
			   background:15px;
		   }
		   li:nth-child(3){
			   background:#ffaa00;
			   color: 15px;
		   }
		</style>
	</head>
	<body>
		<body>鼠标悬停效果</body>
		<a herf ="#">超链接</a>
		<input type="text">;
		<!--  元素之间存在父子级关系，默认存在父子关系-->
		<ol>
			<li>唐山</li>
			
		</ol>
			
		
	</body>
</html>